<template>
  <div class="left-wrap flex flex-col gap-4">
    <div class="box-shadow p-5 cursor-pointer" :class="{ unfold: active === 1 }" @click="active = 1">
      <div class="text-xl font-bold mb-4">月平均温度</div>
      <div class="card-wrap">
        <Card :data="temHome" />
      </div>
      <div class="echart-wrap">
        <div ref="temRef" class="echart-line" />
      </div>
    </div>
    <div class="box-shadow p-5 cursor-pointer" :class="{ unfold: active === 2 }" @click="active = 2">
      <div class="text-xl font-bold mb-4">月平均降水量</div>
      <div class="card-wrap">
        <Card :data="minHome" />
      </div>
      <div class="echart-wrap">
        <div ref="minRef" class="echart-line" />
      </div>
    </div>
    <div class="box-shadow p-5 cursor-pointer" :class="{ unfold: active === 3 }" @click="active = 3">
      <div class="card-wrap card2-wrap">
        <img class="w-full" src="@/assets/images/card2.png" />
      </div>
      <div class="flex items-end justify-between humidity-wrap">
        <div class="text-xl font-bold">月平均湿度</div>
        <div class="humidity text-right">
          <div class="text-gray-500">当前湿度</div>
          <div class="font-bold text-3xl">{{airHome[0]?.value}}%RH</div>
        </div>
      </div>
      <div class="echart-wrap">
        <div ref="airRef" class="echart-line" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import * as echarts from 'echarts';
import Card from './Card.vue'
import { getBarData, getBarHomeData } from '@/api/forest-management'

const active = ref(1)

const temRef = ref()
const minRef = ref()
const airRef = ref()

const handleData = (options: any) => {
  const series: any = []
  const xData: any = []
  Object.entries(options).forEach(([key, value]: [string, any], index: number) => {
    const d: any = {
      name: key,
      type: 'bar',
      data: []
    }
    value.data.forEach((v: any) => {
      d.data.push(Number(v.value))
      if (index === 0) {
        xData.push(v.month)
      }
    })
    series.push(d)
  })

  const option = {
    color: ['#359eff', '#4dc872', '#f7c08e', '#03A9F4', '#9C27B0'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '0',
      right: '0',
      top: '15px',
      bottom: '13px',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: xData,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series
  };

  return option
}

const initChart = (temperature: any, minRainfall: any, airHumidity: any) => {
  // 温度
  const tem = handleData(temperature)
  const temChart = echarts.init(temRef.value)
  temChart.setOption(tem)

  // 降水量
  const min = handleData(minRainfall)
  const minChart = echarts.init(minRef.value)
  minChart.setOption(min)

  // 湿度
  const air = handleData(airHumidity)
  const airChart = echarts.init(airRef.value)
  airChart.setOption(air)
}

const getData = async () => {
  try {
    const res = await getBarData()
    const temperature: any = {}
    const minRainfall: any = {}
    const airHumidity: any = {}
    res.forEach((v: any) => {
      if (v.type === "temperature") {
        temperature[v.year] = v
      } else if (v.type === "minRainfall") {
        minRainfall[v.year] = v
      } else if (v.type === "airHumidity") {
        airHumidity[v.year] = v
      }
    })
    initChart(temperature, minRainfall, airHumidity)
  } finally {
    console.log('finally getBarData');
  }
}

const temHome = ref([])
const minHome = ref([])
const airHome = ref<any>([])
const getHome = async () => {
  try {
    const res = await getBarHomeData()
    res.forEach((v: any) => {
      if (v.type === "temperature") {
        temHome.value = v.data
      } else if (v.type === "minRainfall") {
        minHome.value = v.data
      } else if (v.type === "airHumidity") {
        airHome.value = v.data
      }
    })
  } finally {
    console.log('finally getHomeData');
  }
}

onMounted(async () => {
  await nextTick()
  getData()
  getHome()
})
</script>

<style lang="scss" scoped>
.left-wrap {
  .box-shadow {
    box-shadow: 0px 0px 4px 0px rgba(51, 83, 69, 0.15);
  }

  .card-wrap {
    height: 5rem;
  }

  .card2-wrap {
    height: 4rem;
  }

  .echart-wrap {
    height: 0;
  }

  .card-wrap,
  .echart-wrap {
    transition: 0.5s all;
    overflow: hidden;
  }

  .echart-line {
    height: 42rem;
  }

  .humidity {
    transition: 0.5s all;
    opacity: 1;
    visibility: visible;
  }

  .unfold {
    .card-wrap {
      height: 0;
    }

    .echart-wrap {
      height: 41rem;
    }

    .humidity {
      opacity: 0;
      visibility: hidden;
    }

    .humidity-wrap {
      height: 28px;
      margin-bottom: 1rem;
    }
  }
}
</style>